import React from 'react';
import styles from './index.module.scss';
import DVContainer from "./DVContainer";
import ScaleTool from "./ScaleTool";
import LoadBox from "@/components/LoadBox";
import * as classnames from "classnames";
import dvTool from "@/pages/dv/dvTool";
import {EE} from "@/utils";
import {ArrowsAltOutlined} from '@ant-design/icons';
import EnumOnFire from "@/pages/dv/constants/EnumOnFire";


interface IProps {
  dvLoading: boolean;
}

interface IState {
  name: string;
  selectedKey: string;
}

/**
 * 大屏展示组件
 * @param uuid
 * @param adapterMode
 * @param option
 * @param props
 * @constructor
 */
class BoxContainer extends React.PureComponent<IProps, IState> {

  constructor(props: IProps) {
    super(props);
    this.state = {
      name: dvTool.dvOption.name,
      selectedKey: dvTool.selectedChartKey
    };
  }

  componentDidMount(): void {
    EE.on(EnumOnFire.updateDvOption, (nextDvOption: any) => {
      this.setState({
        name: nextDvOption.name
      })
    })

    EE.on(EnumOnFire.selectedChartKey, (uid: string) => {
      this.setState({
        selectedKey: uid
      })
    })

  }


  render(): React.ReactNode {

    return <div className={styles.dv_box_container}>
      <div className={styles.dv_headerBox}>
        <div
          className={classnames(styles.dv_title, {
            [styles.active]: !this.state.selectedKey
          })}
          onClick={() => dvTool.cancelSelected()}
        >
          {this.state.name}
        </div>
      </div>
      {/*添加一些辅助工具*/}
      <div className={styles.minModalBox} id={'miniModalBox'}/>

      {/*缩放*/}
      <ScaleTool

      />

      {
        this.props.dvLoading ? <LoadBox height={200}/> : <DVContainer/>
      }

    </div>
  }

}

export default BoxContainer;


